<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">


<head>
    <title>旅游攻略</title>
    <link th:href="@{/asserts/css/common/scrollbar.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/asserts/css/navbar.css}" rel="stylesheet" type="text/css" />
    <link th:href="@{/asserts/css/poi/routeHome.css}" rel="stylesheet" type="text/css" />
    <script th:inline="javascript">
        var routes = [[${strategys}]];
    </script>

    <script th:src="@{/asserts/js/common/jquery.js}"></script>

    <script>
        $(function () {
            console.log(routes);
            $(".slide-list").each(function (i, item) {
                var width = $(item).find("img").length * 270 + 10;
                $(item).css({width:width});
            });
        });
    </script>
</head>

<body>
<div id="header" th:replace="~{homepage :: navbar}"></div>
<div id="routebody">

    <div th:each="strategy:${strategys}" class="row row-line ">
        <div class="wrapper">
            <div class="line-panel clearfix">
                <dl class="lp-detail">
                    <dt>
                        <a th:href="@{'/s/' + ${strategy.rid}}" target="_blank">
                            <h2 th:text="${strategy.name}">成都周边5日经典线路</h2>
                        </a>
                    </dt>
                    <dd>
                        <p th:each="route:${strategy.routes}">
                            <dnmd th:if="${routeStat.index le 2}">
                                <hhh th:text="${'D' + (routeStat.index + 1)}"></hhh>
                                <hhh th:each="poi:${route}">
                                    <span th:if="${poiStat.index ne 0}" class="arrow">→</span>
                                    <a th:href="@{'/sight/' + ${poi.sid}}" target="_blank">
                                        <span th:text="${poi.name}">成都</span>
                                    </a>
                                </hhh>
                            </dnmd>
                        </p>
                        <a class="btn-more" th:href="@{'/s/' + ${strategy.rid}}" target="_blank">查看路线详情</a>
                    </dd>
                </dl>
                <div class="lp-maps" data-lineid="100032" data-showfrom="0" style="width: 270px;height: 160px;">
                    <a th:href="@{'/s/' + ${strategy.rid}}" target="_blank">
                        <img th:src="${strategy.pic}" width="270" height="160">
                    </a>
                </div>
                <div class="clear"></div>
                <dl class="lp-lightspot">
                    <dt class="ls-title">路线亮点</dt>
                    <dd>
                        <a class="ls-btn-prev ls-btn-disabled btn-slide-left" href="javascript:void(0)"
                           style="display: none"><i></i></a>
                        <a class="ls-btn-next btn-slide-right" href="javascript:void(0)"
                           style="display: none"><i></i></a>
                        <div class="ls-imgbox">
                                <ul class="slide-list" style="width: 810px; left: 0px;overflow-x: auto">
                                    <hhh th:each="route:${strategy.routes}">
                                    <li th:each="poi:${route}">
                                        <a th:href="@{'/sight/' + ${poi.sid}}" target="_blank">
                                        <img th:src="${poi.pic}"
                                             height="180" width="270" style="display: inline;">
                                        <span class="mask"></span>
                                        <div class="txt"><hhh th:text="${'第' + (routeStat.index + 1) + '天'}"></hhh><br>
                                            <strong th:text="${poi.name}">成都</strong>
                                        </div>
                                        </a>
                                    </li>
                                    </hhh>
                                </ul>
                        </div>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</div>
</body>
</html>